body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}


#tab-bar.demo {
  display: flex;
  flex-direction: column;
}
#tab-bar .demoName {
  height: 0.8rem;
}
#tab-bar .demo-preview-item,
#tab-bar .demo-preview-item .am-tab-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
}
#tab-bar .demo-preview-item .am-tab-bar {
  background-color: white;
}
.container {
  position: relative;
}
.slide-in-appear {
  transform: translate3D(100%, 0, 0);
  transition: all 300ms linear;

  &.slide-in-appear-active {
    transform: translate3D(0, 0, 0);
  }
}

.slide-in-enter {
  transform: translate3D(100%, 0, 0);
  transition: all 300ms linear;

  &.slide-in-enter-active {
    transform: translate3D(0, 0, 0);
  }
}

.slide-in-leave {
  transform: translate3D(0, 0, 0);
  transition: all 300ms linear;

  &.slide-in-leave-active {
    transform: translate3D(-100%, 0, 0);
  }
}

.right-enter {
  position: absolute;
  width: 100%;
  transform: translateX(100%);
}

.right-enter.right-enter-active ,
.left-enter.left-enter-active {
  transform: translateX(0%);
  transition: transform 300ms ease-in;
}

.right-leave, .left-leave {
  position: absolute;
  width: 100%;
  transform: translateX(0%);
}

.right-leave.right-leave-active {
  transform: translateX(-100%);
  transition: transform 300ms ease-in;
}

.left-enter {
  position: absolute;
  width: 100%;
  transform: translateX(-100%);
}

.left-leave.left-leave-active {
  transform: translateX(100%);
  transition: transform 300ms ease-in;
}